<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 设置 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <div class="checkline">
                    <el-button type="primary" @click="openAdd" icon="el-icon-plus">添加设置</el-button>
                    <el-button type="primary" @click="sub()" icon="el-icon-plus">发送</el-button>
                </div>
                <div class="list">
                    <el-table border :data="tableDatas" style="width: 100%">
                        <el-table-column prop="monney" label="可分配资金"> </el-table-column>
                        <el-table-column prop="joinNum" label="参与人数"> </el-table-column>
                        <el-table-column prop="intoNum" label="入围人数"> </el-table-column>
                        <el-table-column min-width="160px" prop="userfulDate" label="有效期"> </el-table-column>
                        <el-table-column min-width="160px" prop="addDate" label="添加时间"> </el-table-column>
                        <el-table-column prop="endDate" label="结束时间"> </el-table-column>
                        <el-table-column prop="address" min-width="180px" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button size="medium" @click="dialogVisible2=true">编辑</el-button>
                                <el-button size="medium" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="block">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[4, 8]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length"
                    >
                    </el-pagination>
                </div>
                <div class="dialog">
                    <el-dialog title="添加设置" :visible.sync="dialogVisible1" width="35%">
                        <el-form label-width="130px">
                            <el-form-item label="可分配资金（万）:">
                                <el-input style="width: 190px" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="活动参与人数:">
                                <el-input style="width: 190px" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="入围人数:">
                                <el-input style="width: 190px" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="入围限制说明：">
                                <el-input style="width: 190px" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="活动有效期：">
                                <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                            
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible2 = false">取消</el-button>
                            <el-button @click="dialogVisible2 = false" type="primary">确 定</el-button>
                        </span>
                    </el-dialog>
                    <el-dialog title="更新设置" :visible.sync="dialogVisible2" width="35%">
                        <el-form label-width="120px">
                            <el-form-item label="可分配的资金:">
                                <el-input style="width: 190px" v-model="upForm.monney" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="活动参与人数:">
                                <el-input style="width: 190px" v-model="upForm.joinNum" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="入围人数:">
                                <el-input style="width: 190px" v-model="upForm.intoNum" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="入围限制说明：">
                                <el-input style="width: 190px" v-model="upForm.intoInfo" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="活动有效期：">
                                <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                            
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible2 = false">取消</el-button>
                            <el-button @click="dialogVisible2 = false" type="primary">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'dataStatistics',
    data() {
        return {
            tableData: [],
            tableData2: [],
            currentPage: 1,
            pageSize: 4,
            dialogVisible1: false,
            dialogVisible2: false,
            // 更新的数据
            upForm: []
        };
    },
    computed: {
        tableDatas() {
            if (this.tableData !== [])
                return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize - 1);
        }
    },
    methods: {
        // sub() {
        //     this.axios.post('/api/changeSetup', {_id: "60d2a2cd0d9e4f401c9ff03b",monney: 1259})
        //         .then((res) => {
        //             console.log(res.data.msg);
        //             this.$message({
        //                 // 可手动关闭
        //                 showClose: true,
        //                 // 文字居中
        //                 center: true,
        //                 type: 'success',
        //                 message: res.data.msg
        //         });
        //         });
        // },
        handleSizeChange(val) {
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        // 新增配置
        openAdd() {
            this.dialogVisible1 = true;
        },
        // 编辑配置
        // handleEdit() {
        //     this.dialogVisible2 = true;
        // },
        handleDelete(index, row) {
            // 接口参数
            var params = {
                _id: row._id
            };
            console.log(index, row);
            console.log(row._id);
            this.$confirm('是否删除当前活动?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                // 删除
                this.axios.post('/api/deleteSetup', params)
                .then((res) => {
                    console.log(res.data.msg);
                    this.$message({
                        // 可手动关闭
                        showClose: true,
                        // 文字居中
                        center: true,
                        type: 'success',
                        message: res.data.msg
                });
                });
                
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    mounted() {
        // 获取所有销售活动数据
        this.axios.get('/api/getSetup').then((res) => {
            // 赋值
            this.tableData = res.data.data;
            console.log(res.data.data);
        });
    }
};
</script>

<style scoped>
.list {
    margin-top: 30px;
}

.block {
    display: flex;
    justify-content: center;
}

</style>
